<template>
	<el-config-provider :locale="$i18n.messages[$i18n.locale].el">
		<router-view></router-view>
	</el-config-provider>
</template>

<script>
	import colorTool from '@/utils/color'
	export default {
		name: 'App',
		created() {
			//设置主题颜色
			const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get('APP_COLOR')
			if(app_color){
				document.documentElement.style.setProperty('--el-color-primary', app_color);
				for (let i = 1; i <= 9; i++) {
					document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color,i/10));
				}
				document.documentElement.style.setProperty(`--el-color-primary-darken-1`, colorTool.darken(app_color,0.1));
			}
		}
	}
</script>

<style lang="scss">
@import '@/style/style.scss';
@import '@/style/theme/dark.scss';
:root {
  --el-color-primary: #019E69; /* 修改主色 */
  --el-color-primary-light-1: #2CA57C;
  --el-color-primary-light-2: #66b28e;
  --el-color-primary-light-3: #79c6a0;
  --el-color-primary-light-4: #8cd8b2;
  --el-color-primary-light-5: #a0e0c4;
  --el-color-primary-light-6: #b3e8d6;
  --el-color-primary-light-7: #c6f0e8;
  --el-color-primary-light-8: #d9f8f1;
  --el-color-primary-light-9: #ecfff4;
}
/* 覆盖主按钮的所有状态 */
.el-button--primary {
  background-color: #019E69 !important;  /* 主按钮背景色 */
  border-color: #019E69 !important;  /* 主按钮边框色 */
  color: white !important;  /* 主按钮文本颜色 */
}

/* 按钮的悬停状态 */
.el-button--primary:hover {
  background-color: #017C55 !important;  /* 悬停时按钮背景色 */
  border-color: #017C55 !important;  /* 悬停时按钮边框色 */
}

/* 按钮的点击状态 */
.el-button--primary:active {
  background-color: #016B4C !important;  /* 点击时按钮背景色 */
  border-color: #016B4C !important;  /* 点击时按钮边框色 */
}

/* 按钮的禁用状态 */
.el-button--primary:disabled {
  background-color: #c2e8d6 !important;  /* 禁用时按钮背景色 */
  border-color: #c2e8d6 !important;  /* 禁用时按钮边框色 */
  color: #999999 !important;  /* 禁用时按钮文本颜色 */
}

.el-popover.el-popper {
	font-size: 12px !important;
	color: #4b5772bf !important;
}

.el-popover__title {
	font-size: 16px !important;
	color: #4b5772 !important;
	padding-left: 20px !important;
	position: relative;
	font-weight: bold;
}

.el-popover__title::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background: url('../public/img/tips_icon.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
</style>
